<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Ankang
 * @Date: 2021-06-04 20:06:13
 * @LastEditors: Ankang
 * @LastEditTime: 2021-06-09 21:50:33
-->
<template>
  <!-- <Home></Home> -->
  <transition
    :enter-active-class="`animate__animated animate__faster animate__${slideInDir}`"
    :leave-active-class="`animate__animated animate__faster animate__${slideOutDir}`"
  >
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      slideInDir: "",
      slideOutDir: "",
    };
  },
  components: {},
  watch: {
    $route(to, from) {
      // console.log(to,from);
      if (from.meta.hasOwnProperty("index")) {
        if (to.meta.index > from.meta.index) {
          this.slideInDir = "slideInRight";
          this.slideOutDir = "slideOutLeft";
        } else {
          this.slideInDir = "slideInLeft";
          this.slideOutDir = "slideOutRight";
        }
      }
    },
  },
};
</script>

<style lang='stylus' scoped></style>
